Migrates atomic-smart-snippet-expandable-answer from Stencil to Lit framework as part of the ongoing framework migration effort.

Changes

• Component migration: Converted Stencil .tsx to Lit .ts with proper decorators (@customElement, @bindings(), @withTailwindStyles)
• Styles: Migrated PostCSS to embedded CSS with Tailwind classes in template
• Imports: Converted all relative imports to path aliases (@/src/*)
• Type safety: Implements InitializableComponent<AnyBindings> interface
• Lifecycle: Migrated to Lit lifecycle methods (firstUpdated(), updated())
• Events: Custom event dispatching with proper bubbling and composition
• Unit tests: Comprehensive Vitest test suite covering props, events, rendering, and CSS custom properties

Technical Details

Internal component used by atomic-smart-snippet and atomic-insight-smart-snippet. Preserves all functionality:

• Dynamic height calculation with firstUpdated() hook
• Expand/collapse button visibility based on content height threshold
• Event forwarding from child atomic-smart-snippet-answer
• CSS custom properties (--full-height, --collapsed-size)
• Prop validation (maximumHeight ≥ collapsedHeight)

@customElement('atomic-smart-snippet-expandable-answer')
@bindings()
@withTailwindStyles
export class AtomicSmartSnippetExpandableAnswer
  extends LitElement
  implements InitializableComponent<AnyBindings>
{
  @property({type: Boolean, reflect: true}) expanded!: boolean;
  @property({type: Number, reflect: true}) maximumHeight = 250;
  @state() private fullHeight?: number;
  
  protected async firstUpdated(): Promise<void> {
    this.fullHeight = await this.establishInitialHeight();
  }
}

No Storybook stories or E2E tests added—internal component tested through parent component integration.

Custom agent used: StencilToLitMigrationV1
Specialized agent for migrating Atomic Stencil code to Lit (components, functional components, and utils)

• Fixes Migrate atomic-smart-snippet-expandable-answer #6784

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.